<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" title="个人信息" :border-bottom="false"></u-navbar>
		<view class="sz-div u-m-t-22">
			<view class="item flex flex_sb">
				<view class="">
					头像
				</view>
				<view class="flex" @click="chooseImage">
					<image class="headimg u-m-r-4" :src="detail.image" mode="aspectFill"></image>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="item flex flex_sb">
				<view class="">
					昵称
				</view>
				<view class="flex" @click="ncShow = true">
					<view class="u-m-r-4 item-vl">
						{{detail.name}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="item flex flex_sb">
				<view class="">座右铭</view>
				<view class="flex" @click="zymShow = true">
					<view class="u-m-r-4 item-vl line_1">
						{{detail.motto}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="item flex flex_sb">
				<view class="">手机号</view>
				<view class="flex" >
					<view class="u-m-r-4 item-vl">
						{{detail.mobile}}
					</view>
					<!-- <u-icon name="arrow-right" color="#333" size="24" @click="edit(1)"> </u-icon> -->
				</view>
			</view>
			<!-- <view class="item flex flex_sb">
				<view class="">密码</view>
				<view class="flex"  @click="edit(2)">
					<view class="u-m-r-4 item-vl">
						******
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="lo-btn" @click="logout">
			退出登录
		</view>
		
		
		
		<u-popup v-model="ncShow" mode="bottom" border-radius="32" closeable @close="getInfo">
			<view class="mxpo-div ">
				<view class="font_weight  font_17_333">
					修改昵称
				</view>
				<view class="jinji-item">
					<view class="jinji-input">
						<u-input v-model="detail.name" />
					</view>
				</view>
				
				<view class="bob-btn u-m-t-58" @click="changeNick">
					完成
				</view>
			</view>
		</u-popup>
		<u-popup v-model="zymShow" mode="bottom" border-radius="32" closeable @close="getInfo">
			<view class="mxpo-div ">
				<view class="font_weight  font_17_333">
					座右铭昵称
				</view>
				<view class="jinji-item">
					<view class="jinji-input">
						<u-input v-model="detail.motto" />
					</view>
				</view>
				
				<view class="bob-btn u-m-t-58" @click="changeNick">
					完成
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:[],
				ncShow: false,
				zymShow:false,
				nickname:'',
				action:''
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			//个人信息
			getInfo() {
				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token:this.token
					},
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					}
				})
			},
			changeNick(){
				this.$api({
					url: '/updateUser',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						"name": this.detail.name,//昵称
						motto:this.detail.motto
					},
				}).then(res => {
					if (res.code == 1) {
						this.getInfo()
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						this.ncShow = false
						this.zymShow = false
						
					}
				})
				
			},
			chooseImage() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
			
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths,'uni.getStorageSync("token")');
						console.log(uni.getStorageSync("token"),'uni.getStorageSync("token")uni.getStorageSync("token")');
						uni.uploadFile({
							url: that.$config.uploadUrl, 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								
								// that.detail.image = JSON.parse(uploadFileRes.data).data.path
								// console.log(that.detail.image)
								if(JSON.parse(uploadFileRes.data).code!=1){
									uni.showToast({
										title: JSON.parse(uploadFileRes.data).msg,
										icon: 'none'
									})
									return
								}
								
								
								that.$api({
									url: '/updateUser',
									method: 'post',
									data: {
										token: uni.getStorageSync("token"),
										"image": JSON.parse(uploadFileRes.data).data.path,
									},
								}).then(res => {
									if (res.code == 1) {
										that.getInfo()
										uni.showToast({
											title: '修改头像成功',
											icon: 'none'
										})
									}
								})
							}
						});
					}
			
				});
			},
			logout() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认退出登录吗',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('userInfo')
							uni.removeStorageSync('token')
							
							uni.showToast({
								title: '成功退出登录',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.reLaunch({
									url: "/pages/mine/mine"
								})
							},1000)
							
							
						}
					}
				});
			},
			edit(e){
				if(e==1){
					uni.navigateTo({
						url:"/pages/mine/editPhone"
					})
				}
				if(e==2){
					uni.navigateTo({
						url:"/pages/mine/editPwd"
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.sz-div {
		background-color: #fff;
		width: 686rpx;
		// height: 550rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		padding: 0 24rpx;

		.item {
			width: 100%;
			height: 110rpx;
			border-bottom: 1px solid #eee;
			
			.item-vl{
				font-size: 32rpx;
				color: #9695A3;
				width: 256rpx;
				text-align: right;
			}

			.headimg {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				background: #eee;
			}
		}
	}
	.lo-btn{
		width: 686rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
		line-height: 90rpx;
		margin: 70rpx auto;
	}
	.mxpo-div {
		width: 750rpx;
		// height: 1034rpx;
		background: #FFFFFF;
		padding: 80rpx 24rpx 40rpx;
	
		.mxt {
			color: #16053C;
		}
	
		.bob-btn {
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			// margin-left: 32rpx;
			text-align: center;
		}
	}
	.jinji-item {
		margin-top: 36rpx;
	
		.jinji-text {
			font-size: 32rpx;
			color: #3F464E;
		}
	
		.jinji-input {
			width: 690rpx;
			height: 88rpx;
			background: #EDEDED;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 24rpx;
			padding: 8rpx 24rpx;
		}
	
		.jinji-input2 {
			height: 268rpx;
		}
	}
</style>